//console.log("测试+/////////////")

//获取DOM
var TIME = 3000;
var user = document.getElementById("user");
var age = document.getElementById("age");
var sex = document.querySelectorAll("#sex input");
var hobby = document.querySelectorAll(".hobby>label>input");
var checkAll = document.getElementById("checkAll");
var inverse = document.getElementById("inverse");
var edu = document.getElementById("edu");
//console.log("edu:",edu);
var add = document.getElementById("add");
var queRenXiuGai = document.getElementById("queRenXiuGai");
var GeHang = document.getElementById("GeHang");
var yiRu = document.getElementById("yiRu");
var paiXu = document.getElementById("paiXu");
var search = document.getElementById("search");
var chaXun = document.getElementById("chaXun");
var quanBuShanChu = document.getElementById("quanBuShanChu");
var tab = document.getElementById("tab");
var tbody=document.querySelector("table#tab>tbody");
var info = document.getElementById("info");

//判断并获取本地存储
;(function(){
    if(!localStorage.arr1121){
        localStorage.arr1121="[]";
    }else{
        var arr=JSON.parse(localStorage.arr1121);
        showPage(arr);
    }
}());

//添加函数
add.onclick=function(){
    if(!user.value){
        infoFun("请输入姓名",TIME);
    }else if(!age.value){
        infoFun("请输入年龄",TIME);
    }else{
        var obj={
            user : user.value,
            age:age.value,
            sex:getSex(),
            hobby:getHobby(),
            edu:edu.value,
            id:+new Date(),
        }
        console.log("obj:",obj);
        if(!localStorage.arr2021113){
            localStorage.arr2021113="[]";
            arr=[];
        }
        var arr=JSON.parse(localStorage.arr1121);
        arr.push(obj);
        showPage(arr);
        localStorage.arr1121=JSON.stringify(arr);
    }
    clearValue();
}

//获取性别
function getSex(){
    return sex[0].checked?"0":"1";
}

//获取爱好
function getHobby(){
    var arr=[];
    for(var i=0;i<hobby.length;i++){
        if(hobby[i].checked){
            arr.push(hobby[i].value);
        }
    }
    return arr;
}

//渲染函数
function showPage(arr){
    var arr0=JSON.parse(localStorage.arr1121);
    if(arr0.length==0){
        tab.classList.add("hide");
    }else{
        tab.classList.remove("hide");
        var str="";
        for(var i=0;i<arr.length;i++){
            str+=`
            <tr>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex==0?"男":"女"}</td>
							<td>${setHobby(arr[i].hobby)}</td>
							<td>${setEdu(arr[i].edu)}</td>
							<td>${time(arr[i].id)}</td>
							<td>
								<button type="button" ${i==0?"disabled":'onclick=up("'+arr[i].id+'")'}>上移</button>
								<button type="button" onclick=del('${arr[i].id}')>删除</button>
								<button type="button" onclick=upd(${JSON.stringify(arr[i])})>修改</button>
								<button type="button" ${i==arr.length-1?"disabled":'onclick=floor("'+arr[i].id+'")'}>下移</button>
							</td>
						</tr>
            `;
        }
        tbody.innerHTML=str;
    }
}

//展示爱好函数
function setHobby(arr){
    var obj={
        h1:"学习",
        h2:"健身",
        h3:"挣钱",
        h4:"美食",
        h5:"游泳",
        h6:"自驾游",
    }
    var str="";
    for(var i=0;i<arr.length;i++){
        str+=obj[arr[i]]+" ";
    }
    return str;
}
//获取受教育程度
function setEdu(e){
    var obj={
        e1:"博士",
        e2:"本科",
        e3:"专科",
        e4:"高中",
        e5:"初中",
        e6:"小学",
    }
    return obj[e];
}
//时间函数
function time(n){
    var t=new Date(n);
    var y=t.getFullYear();
    var mon=bu0(t.getMonth());
    var d=bu0(t.getDate());
    var h=bu0(t.getHours());
    var m=bu0(t.getMinutes());
    var s=bu0(t.getSeconds());
    return y+"-"+mon+"-"+d+" "+h+":"+m+":"+s;
}
//补0函数
function bu0(n){
    return n<10?"0"+n:n;
}

//删除函数
function del(id){
    var arr=JSON.parse(localStorage.arr1121);
    var f=confirm("你确定删除吗?");
    if(f){
        for(var i=0;i<arr.length;i++){
            if(arr[i].id==id){
                arr.splice(i,1);
                break;
            }
        }
    }
    showPage(arr);
    localStorage.arr1121=JSON.stringify(arr);
}

//修改函数
function upd(obj){
    /*var arr=JSON.parse(localStorage.arr1121);
    for(var i=0;i<arr.length;i++){
        if(arr[i].id==id)
    }*/
    //console.log("obj:",obj);
    idNew=obj.id;
    user.value=obj.user;
    age.value=obj.age;
    edu.value=obj.edu;

    //设置性别
    obj.sex=="0"?sex[0].checked=true:sex[1].checked=true;
    //设置爱好的选择
    updSetHobby(obj.hobby);

    add.classList.add("hide");
    queRenXiuGai.classList.remove("hide");
}

//设置爱好选择函数
function updSetHobby(arr){
    //console.log("arr:",arr);
    for(var i=0;i<hobby.length;i++){
        hobby[i].checked=false;
        for(var j=0;j<arr.length;j++){
            if(hobby[i].value==arr[j]){
                hobby[i].checked=true;
                break;
            }
        }
    }
    ck();
}

//确认修改函数
queRenXiuGai.onclick=function(){
    var obj={
        user : user.value,
        age:age.value,
        sex:getSex(),
        hobby:getHobby(),
        edu:edu.value,
        id:idNew,
    }
    console.log("obj:",obj);
    var arr=JSON.parse(localStorage.arr1121);
    for(var i=0;i<arr.length;i++){
        if(arr[i].id==idNew){
            arr.splice(i,1,obj);
            localStorage.arr1121=JSON.stringify(arr);
            showPage(arr);
        }
    }
    clearValue();
}

function clearValue(){
    user.value=age.value=edu.value="";
    sex[0].checked=sex[1].checked=false;
    for(var i=0;i<hobby.length;i++){
        hobby[i].checked=false;
    }
    checkAll.checked=false;
}

//全选函数1控5
checkAll.onclick=function(){
    for(var i=0;i<hobby.length;i++){
        hobby[i].checked=checkAll.checked;
    }
}

//全选函数5控1
function ck(){
    var f=true;
    for(var i=0;i<hobby.length;i++){
        if(!hobby[i].checked){
            f=false;
            break;
        }
    }
    checkAll.checked=f;
}

//反选函数
inverse.onclick=function(){
    for(var i=0;i<hobby.length;i++){
        hobby[i].checked=!hobby[i].checked;
    }
    ck();
}

//隔行变色函数
GeHang.onclick=function(){
    tab.classList.toggle("geHangBianSe");
    if(this.innerHTML=="开启隔行变色"){
        this.innerHTML="关闭隔行变色"
    }else{
        this.innerHTML="开启隔行变色";
    }
}
//移入变色函数
yiRu.onclick=function(){
    tab.classList.toggle("yiRuBianSe")
    if(this.innerHTML=="开启移入变色"){
        this.innerHTML="关闭移入变色"
    }else{
        this.innerHTML="开启移入变色"
    }
}
//按年龄升序
paiXu.onclick=function(){
    var arr=JSON.parse(localStorage.arr1121);
    this.classList.add("active");
    if(this.innerHTML=="按年龄升序↑"){
        this.innerHTML="按年龄降序↓";
        arr.sort(function(a,b){
            return a.age-b.age
        });
    }else if(this.innerHTML=="按年龄降序↓"){
        this.innerHTML="按添加顺序排序";
        arr.sort(function(a,b){
            return b.age-a.age;
        })
    }else{
        this.innerHTML="按年龄升序↑";
        this.classList.remove("active");
    }
    showPage(arr);
}

//查询函数
chaXun.onclick=function(){
    var arrNew=[];
    var arr=JSON.parse(localStorage.arr1121);
    for(var i=0;i<arr.length;i++){
        if(arr[i].user==chaXun.value||arr[i].age==chaXun.value){
            arrNew.push(arr[i]);
            showPage(arrNew);
        }else{
            infoFun("未找到匹配的数据",TIME);
        }
    }
}

//全部删除函数
quanBuShanChu.onclick=function(){
    var f=confirm("你确定要删除全部的数据吗?")
    if(f){
        var arr=[];
        showPage(arr);
        localStorage.arr1121=JSON.stringify(arr);
    }
}

//提示信息函数
function infoFun(str,time){
    info.classList.add("show");
    info.innerHTML=str;
    var t=setTimeout(function(){
        info.classList.remove("show");
    },time);
}
    

